<template>
	<view class="container">

		<tab-scroll-view :curAreaNum='curAreaNum' ref="tab_nav" v-if="pageName=='index'"></tab-scroll-view>

		<!-- 智能控制按钮 -->
		<!-- 	<view class="control-bar" @tap="openControlPage">
			<text>智能控制</text>
			<img class="arrow" src="/static/arrow-right.png" alt="" />
		</view> -->

		<!-- 设备状态列表 -->
		<view class="device-list" :loading="btnLoading" v-if="this.$store.state.areaObject.shebeibianhao != 0">
			<view v-for="(device, index) in devicesForAreas" :key="index" class="device-item">
				<view>
					<view class="status-text"
						:class="{ 'enabled': device.last_value == 1, 'disabled': device.last_value == 0 }">
						<text>{{ device.last_value == 1 ? '已开启' : '已关闭' }}</text>

					</view>
					<view class="device-name">
						<text>{{ device.alias }}</text>
					</view>
				</view>
				<switch :checked="device.last_value == 1" @change="toggleDeviceStatus(index, device)"></switch>
			</view>
		</view>
		<view v-else style="display: flex;justify-content: center;align-items: center;flex-direction: column; padding: 58px 10px;background: #fff;
  box-sizing: border-box;">
			<image src="../../static/null.png" mode="" style="magin:30px auto;height: 120px;width: 120px;"></image>
			<text>未绑定设备</text>
		</view>
		<view v-if="this.$store.state.areaObject.image!=''">
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</view>
		<uni-popup :show="imgDialog" ref="imgpopup">
			<view class="popup_content">
				<view class="common-dialog">
					<view class="close" @click="bindClose">
						<uni-icons type="closeempty" size="24" color="#ff0000"></uni-icons>
					</view>

					<view class="image-item">
						<image :src="this.$store.state.areaObject.image" loading="../../static/loading.gif"
							@click="bindLook" class='greenImg' mode="">
						</image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import TabScrollView from '@/components/TabScrollView/TabScrollView.vue'
	import {
		getIrriCtrlboxDoList,
		setDeviceDtuControl
	} from '../../api/index.js'
	export default {
		computed: {
			...mapState(['areaObject'])
		},
		components: {
			TabScrollView,
		},
		onShow() {
			console.log('index')
			this.pageName = 'index'
		},
		onHide() {
			this.pageName = ''
		},
		watch: {
			areaObject: {
				handler: function(val, oldVal) {
					this.bindArea()
				},
				// deep: true,
				immediate: true
			}
		},
		data() {
			return {
				activeTab: this.$store.state.curAreaNum, // 当前选中的标签页
				devicesForAreas: [],
				btnLoading: false,
				areaForm: {},
				pageName: '',
				imgDialog: false,
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff',
					icon: 'image'
				}
			};
		},
		methods: {
			bindLook() {
				let arr = [this.$store.state.areaObject.image]
				// let obj = {
				// 	url: this.$store.state.areaObject.image
				// }
				// arr.push(obj)
				uni.previewImage({
					urls: arr, // 图片列表
					current: 0, // 当前显示图片的索引
					indicator: 'default' // 图片指示器样式，默认为圆点
				})
			},
			bindClose() {
				this.$refs.imgpopup.close()
			},

			fabClick() {
				this.$refs.imgpopup.open()
			},
			bindArea() {
				this.areaForm = this.areaObject
				if (this.areaForm.shebeibianhao != 0) {
					uni.setNavigationBarTitle({
						title: this.areaForm.shebeibianhao
					});
					this.getDoList(this.areaForm)
				} else {
					uni.setNavigationBarTitle({
						title: ''
					});
					this.devicesForAreas = []

				}

			},
			getDoList(row) {
				uni.showLoading({
					title: '加载中'
				});
				getIrriCtrlboxDoList({
						shebeibianhao: row.shebeibianhao
					})
					.then(res => {
						if (res.code == 200) {
							this.devicesForAreas = res.data.dolist
						}
					})
			},
			goBack() {
				uni.redirectTo({
					url: '/pages/login/login' // 返回到登录页
				});
			},
			openControlPage() {
				// 跳转到智能控制页面
				uni.switchTab({
					url: '/pages/control/control'
				});
			},
			toggleDeviceStatus(index, stateObj) {
				this.btnLoading = true;
				setDeviceDtuControl({
						shebeibianhao: this.areaForm.shebeibianhao,
						value: stateObj.last_value == 1 ? 0 : 1,
						num: stateObj.num,
						type: 1
					})
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '设置成功',
								icon: 'success',
								duration: 2000
							});
							setTimeout(() => {
								this.btnLoading = false;
								this.getDoList(this.areaForm)
							}, 1500)
						} else {
							this.btnLoading = false;
						}

					})
					.catch(err => {
						this.btnLoading = false;
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						});
					});
				// 切换当前区域设备的状态

			},
			updateActiveTab(newActiveTab) {
				this.areaForm = newActiveTab;
				this.bindArea(newActiveTab)

			}
		}
	};
</script>

<style scoped lang="scss">
	/* 页面整体布局 */
	.container {
		background-color: rgba(162, 167, 221, 0.1);
	}

	.popup_content {
		width: 80%;
		height: auto;
		padding: 20px;

		.common-dialog {
			width: 300px;
			border-radius: 12px;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			padding: 30px 0px 0px 0px;
			/* 将底部内边距设置为0 */
			display: flex;
			flex-direction: column;
			position: relative;

			.close {
				position: absolute;
				right: 10px;
				top: -5px;
			}

			.input-item-groud {
				margin: 20px 0;
			}

			.error {
				color: #f34d37;
				font-size: 12px;
			}

			.greenImg {

				max-width: 94%;
				margin-left: 3%;
				height: 400rpx;
			}
		}
	}

	.custom-nav {
		display: flex;
		align-items: center;
		height: 50px;


	}

	.back-arrow {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		width: 20px;
		height: 20px;
	}

	/* 智能控制栏 */
	.control-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		background-color: rgba(151, 151, 151, 0.12);
		margin-bottom: 15px;
		border-radius: 6px;

	}

	.control-bar text {
		font-size: 14px;
		color: #979797;
		font-weight: 300;

	}

	.arrow {
		left: 10px;
		position: relative;

		width: 10px;
		height: 10px;
	}

	/* 设备列表 */
	.device-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 58px 10px;
		box-sizing: border-box;
	}

	.device-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		border-radius: 6px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		height: 79px;
	}

	.status-text.enabled text {
		color: #069932;
		font-size: 18px;
		font-weight: 500;
	}

	.status-text.disabled text {
		color: #F5222D;
		font-size: 18px;
		font-weight: 500;
	}

	.device-name text {
		font-size: 14px;
		color: #8C8C8C;
		font-weight: 300s;
	}
</style>